<template>
  <div class="bg">
    <div class="login">
      <p class="title">叩丁狼管理系统</p>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="账号 :" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            auto-complete="off"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码 :" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="login('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 消息提示
import { Message } from "element-ui"; //单独引入
import { getUserByToken, getLogin } from "@/request/httpAPI";
import { SETMENU, SETUSERINFO } from "@/store/mutation-types";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      //   验证规则
      rules: {
        username: [
          // required-必填项, message-提示信息, trigger-触发事件
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //   登录事件绑定
    login(ruleForm) {
      // result---验证结果返回的Boolean值   validate--校验
      this.$refs[ruleForm].validate((result) => {
        console.log(result);
        // 验证成功 处理的逻辑(发送请求)
        if (result) {
          // console.log(this.ruleForm.password, this.ruleForm.username);
          getLogin({
            password: this.ruleForm.password,
            username: this.ruleForm.username,
          })
            .then((res) => {
              // console.log(res);
              // 请求成功
              if (res.errno == 0) {
                localStorage.setItem("token", res.data.token); // 存储token
                this.$store.commit(SETMENU, res.data.menu); //添加menu数据到vuex
                this.$store.commit(SETUSERINFO, res.data.userInfo);
                Message({
                  message: "登录成功",
                  type: "success",
                  duration: 1000,
                });
                // 跳转到首页
                // Error: Redirected when going from "/login" to "/" via a navigation guard. 这里的报错是由于router版本的问题,不碍事
                // 可以catch()处理
                this.$router.push("/").catch((res) => {});
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100vh;
  background-color: #324057;
  .login {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 168px;
    .title {
      height: 30px;
      margin-left: 100px;
      text-align: center;
      color: #fff;
    }
  }
}
/deep/ .el-form-item__label {
  color: #fff;
}
</style>